import * as React from "react";
import { useSpring, animated } from "react-spring";
import clamp from 'lodash/clamp'
import throttle from 'lodash/throttle'

const remap = (value, low1, high1, low2, high2) => {
  return clamp(low2 + (high2 - low2) * (value - low1) / (high1 - low1), -1, 1);
}

function TypeSafe(props) {
  const wrapper = React.useRef();

  const topRight = p => `translate(0, ${-p * 90})`;
  const bottomLeft = p => `translate(0, ${-p * 40})`
  const bottom = p => `translate(0, ${-p * 50})`
  const [squareProps, set] = useSpring(() => ({
    progress: 0,
    config: { mass: 10, tension: 550, friction: 100 }
  }));

  const setScrollY = React.useCallback(throttle(e => {
    const { y, height } = wrapper.current.getBoundingClientRect();
    const progress = remap(window.innerHeight - y, 0, window.innerHeight + height, -1, 1);
    set({progress})
  }, 50), [set])

  React.useEffect(() => {
    window.addEventListener("scroll", setScrollY);
    return () => {
      window.removeEventListener("scroll", setScrollY);
    };
  }, [setScrollY]);

  return (
    <div style={{width: '100%', display: 'flex', justifyContent: 'center'}} ref={wrapper}>
      <svg viewBox="0 -50 444 600" {...props}>
        <defs>
          <linearGradient
            id="prefix__linear-gradient"
            x1={292.3}
            y1={181.25}
            x2={416.87}
            y2={79.26}
            gradientUnits="userSpaceOnUse"
          >
            <stop offset={0.01} stopColor="#a8263f" />
            <stop offset={1} stopColor="#d83058" />
          </linearGradient>
          <linearGradient
            id="prefix__linear-gradient-2"
            x1={145.25}
            y1={422.39}
            x2={24.72}
            y2={367.07}
            gradientUnits="userSpaceOnUse"
          >
            <stop offset={0} stopColor="#661629" />
            <stop offset={1} stopColor="#931d34" />
          </linearGradient>
          <linearGradient
            id="prefix__linear-gradient-3"
            x1={141.87}
            y1={350.7}
            x2={288.11}
            y2={283.48}
            gradientTransform="matrix(0 1 1 0 -143 217)"
            xlinkHref="#prefix__linear-gradient"
          />
          <linearGradient
            id="prefix__linear-gradient-4"
            x1={19}
            y1={149.7}
            x2={91.69}
            y2={149.7}
            gradientUnits="userSpaceOnUse"
          >
            <stop offset={0} stopColor="#999" stopOpacity={0} />
            <stop offset={0.14} stopColor="#999" stopOpacity={0.03} />
            <stop offset={0.31} stopColor="#999" stopOpacity={0.12} />
            <stop offset={0.48} stopColor="#999" stopOpacity={0.28} />
            <stop offset={0.67} stopColor="#999" stopOpacity={0.49} />
            <stop offset={0.86} stopColor="#999" stopOpacity={0.77} />
            <stop offset={1} stopColor="#999" />
          </linearGradient>
          <linearGradient
            id="prefix__linear-gradient-5"
            x1={19}
            y1={298.79}
            x2={91.69}
            y2={298.79}
            xlinkHref="#prefix__linear-gradient-4"
          />
          <linearGradient
            id="prefix__linear-gradient-6"
            x1={19}
            y1={350.72}
            x2={91.69}
            y2={350.72}
            xlinkHref="#prefix__linear-gradient-4"
          />
          <linearGradient
            id="prefix__linear-gradient-7"
            x1={308}
            y1={407.09}
            x2={380.69}
            y2={407.09}
            gradientTransform="matrix(-1 0 0 1 732 0)"
            xlinkHref="#prefix__linear-gradient-4"
          />
          <linearGradient
            id="prefix__linear-gradient-8"
            x1={222.86}
            y1={258.67}
            x2={222.86}
            y2={213.87}
            gradientUnits="userSpaceOnUse"
          >
            <stop offset={0} stopColor="#6e6e6e" />
            <stop offset={1} stopColor="#5e5f60" />
          </linearGradient>
          <linearGradient
            id="prefix__linear-gradient-9"
            x1={90.02}
            y1={245.54}
            x2={90.02}
            y2={225.46}
            gradientUnits="userSpaceOnUse"
          >
            <stop offset={0} stopColor="#ca2e5d" />
            <stop offset={1} stopColor="#f23d63" />
            <stop offset={1} stopColor="#5e5f60" />
          </linearGradient>
          <linearGradient
            id="prefix__linear-gradient-10"
            x1={90.02}
            y1={309.18}
            x2={90.02}
            y2={289.09}
            gradientUnits="userSpaceOnUse"
          >
            <stop offset={0} stopColor="#1e56d4" />
            <stop offset={1} stopColor="#2f6aec" />
          </linearGradient>
          <linearGradient
            id="prefix__linear-gradient-11"
            x1={90.02}
            y1={361.1}
            x2={90.02}
            y2={341.02}
            gradientUnits="userSpaceOnUse"
          >
            <stop offset={0} stopColor="#309e64" />
            <stop offset={1} stopColor="#30d673" />
          </linearGradient>
          <linearGradient
            id="prefix__linear-gradient-12"
            x1={90.02}
            y1={159.34}
            x2={90.02}
            y2={139.26}
            xlinkHref="#prefix__linear-gradient-9"
          />
          <linearGradient
            id="prefix__linear-gradient-13"
            x1={352.62}
            y1={417.46}
            x2={352.62}
            y2={397.38}
            xlinkHref="#prefix__linear-gradient-9"
          />
          <style>
            {
              ".prefix__cls-14{font-size:25.16px}.prefix__cls-14,.prefix__cls-19{font-family:Paralucent-Medium,Paralucent;font-weight:500}.prefix__cls-18{fill:#3a3a3a}.prefix__cls-19{font-size:23.12px}.prefix__cls-22,.prefix__cls-24{letter-spacing:-.02em}.prefix__cls-25{opacity:.45}.prefix__cls-27{letter-spacing:-.09em}.prefix__cls-28{letter-spacing:-.03em}"
            }
          </style>
        </defs>
        <g
          style={{
            isolation: "isolate"
          }}
        >
          <g id="prefix__Layer_2" data-name="Layer 2">
            <g id="prefix__Layer_1-2" data-name="Layer 1">
              <animated.path
                ref={bottomLeft}
                id="prefix__ts-bottom-left"
                d="M389.86 251h-94.3C283.1 251 273 241 273 229.07v-183c0-6.72 7.32-12.07 16.34-12.07h68.32c9 0 17.29 5.35 18.48 12.09l32.4 183C410.65 241 402.32 251 389.86 251z"
                fill="url(#prefix__linear-gradient)"
                transform={squareProps.progress.interpolate(bottomLeft)}
              />
              <animated.path
                ref={topRight}
                id="ts-top-right"
                d="M15 355.41v69.39a16.48 16.48 0 0016.21 16.61h141.08c5.41 0 9.71-5.64 9.71-12.58v-52.58c0-6.94-4.3-13.21-9.71-14l-141.08-21C22.35 339.9 15 346.24 15 355.41z"
                fill="url(#prefix__linear-gradient-2)"
                transform={squareProps.progress.interpolate(topRight)}
              />
              <animated.path
                ref={bottom}
                id="ts-bottom"
                d="M272 502.75v-90.18c0-11.91-9.55-21.57-21.06-21.57H67.61c-7 0-12.61 7.32-12.61 16.34v68.32c0 9 5.59 17.17 12.61 18.22l183.33 27.3c11.51 1.71 21.06-6.52 21.06-18.43z"
                fill="url(#prefix__linear-gradient-3)"
                transform={squareProps.progress.interpolate(bottom)}
              />
              <path
                d="M89.47 151.92H21.23a2.23 2.23 0 110-4.45h68.24a2.23 2.23 0 010 4.45z"
                fill="url(#prefix__linear-gradient-4)"
              />
              <path
                d="M89.47 301H21.23a2.23 2.23 0 110-4.45h68.24a2.23 2.23 0 010 4.45z"
                fill="url(#prefix__linear-gradient-5)"
              />
              <path
                d="M89.47 352.94H21.23a2.23 2.23 0 110-4.45h68.24a2.23 2.23 0 010 4.45z"
                fill="url(#prefix__linear-gradient-6)"
              />
              <path
                d="M353.53 409.32h68.24a2.23 2.23 0 100-4.46h-68.24a2.23 2.23 0 000 4.46z"
                fill="url(#prefix__linear-gradient-7)"
              />
              <image
                width={444}
                height={561}
                xlinkHref=""
                style={{
                  mixBlendMode: "multiply"
                }}
                opacity={0.65}
              />
              <rect
                x={90.79}
                y={70.6}
                width={262.6}
                height={379.58}
                rx={8.31}
                fill="#545556"
              />
              <rect
                x={90.79}
                y={70.6}
                width={262.6}
                height={379.58}
                rx={8.31}
                strokeMiterlimit={10}
                stroke="#212121"
                strokeWidth={0.5}
                fill="none"
              />
              <path
                d="M99.1 70.6h246a8.31 8.31 0 018.31 8.31v33.69H90.79V78.92a8.31 8.31 0 018.31-8.32z"
                fill="#4a4b4c"
              />
              <path
                stroke="#2f3030"
                strokeMiterlimit={10}
                fill="none"
                d="M90.79 112.6h262.6"
              />
              <text
                className="prefix__cls-14"
                transform="translate(104.63 100.79)"
              >
                {"Caclul"}
                <tspan x={69.22} y={0} letterSpacing="-.01em">
                  {"a"}
                </tspan>
                <tspan x={82.71} y={0} letterSpacing="-.02em">
                  {"t"}
                </tspan>
                <tspan x={90.61} y={0}>
                  {"e Price"}
                </tspan>
              </text>
              <rect
                x={111.64}
                y={213.87}
                width={222.44}
                height={44.8}
                rx={4.16}
                stroke="#3a3a3a"
                fill="url(#prefix__linear-gradient-8)"
                strokeMiterlimit={10}
              />
              <path
                className="prefix__cls-18"
                d="M310.54 231.63h13.1l-6.55-6.55-6.55 6.55zM324.04 239.36h-13.1l6.55 6.55"
              />
              <text
                className="prefix__cls-14"
                transform="translate(121.62 244.54)"
              >
                {".06"}
              </text>
              <text
                className="prefix__cls-19"
                transform="translate(112.36 208.23)"
              >
                <tspan letterSpacing="-.1em">{"T"}</tspan>
                <tspan x={9.27} y={0} letterSpacing="-.02em">
                  {"a"}
                </tspan>
                <tspan x={21.51} y={0}>
                  {"x "}
                </tspan>
                <tspan className="prefix__cls-22" x={39.2} y={0}>
                  {"R"}
                </tspan>
                <tspan x={52.72} y={0} letterSpacing="-.01em">
                  {"a"}
                </tspan>
                <tspan className="prefix__cls-24" x={65.12} y={0}>
                  {"t"}
                </tspan>
                <tspan x={72.38} y={0}>
                  {"e"}
                </tspan>
              </text>
              <circle
                className="prefix__cls-25"
                cx={90.02}
                cy={238.59}
                r={10.04}
              />
              <circle
                cx={90.02}
                cy={235.5}
                r={10.04}
                fill="url(#prefix__linear-gradient-9)"
              />
              <text
                className="prefix__cls-19"
                transform="translate(226.56 414.36)"
              >
                <tspan className="prefix__cls-27">{"T"}</tspan>
                <tspan className="prefix__cls-28" x={9.27} y={0}>
                  {"o"}
                </tspan>
                <tspan className="prefix__cls-24" x={21.9} y={0}>
                  {"t"}
                </tspan>
                <tspan x={29.16} y={0}>
                  {"al Price"}
                </tspan>
              </text>
              <text
                className="prefix__cls-19"
                transform="translate(112.36 307.63)"
              >
                {"Is "}
                <tspan className="prefix__cls-27" x={22.87} y={0}>
                  {"T"}
                </tspan>
                <tspan className="prefix__cls-22" x={32.14} y={0}>
                  {"a"}
                </tspan>
                <tspan x={44.38} y={0} letterSpacing="-.05em">
                  {"x"}
                </tspan>
                <tspan x={55.71} y={0}>
                  {"-"}
                </tspan>
                <tspan x={64.35} y={0} letterSpacing="-.04em">
                  {"e"}
                </tspan>
                <tspan x={76.24} y={0} letterSpacing="-.03em">
                  {"x"}
                </tspan>
                <tspan x={87.94} y={0}>
                  {"em"}
                </tspan>
                <tspan className="prefix__cls-28" x={119.37} y={0}>
                  {"p"}
                </tspan>
                <tspan x={132.18} y={0}>
                  {"t"}
                </tspan>
              </text>
              <circle
                className="prefix__cls-25"
                cx={90.02}
                cy={302.23}
                r={10.04}
              />
              <circle
                cx={90.02}
                cy={299.14}
                r={10.04}
                fill="url(#prefix__linear-gradient-10)"
              />
              <text
                className="prefix__cls-19"
                transform="translate(112.36 359.55)"
              >
                {"Dis"}
                <tspan x={31.82} y={0} letterSpacing="-.01em">
                  {"c"}
                </tspan>
                <tspan x={44.33} y={0}>
                  {"ou"}
                </tspan>
                <tspan className="prefix__cls-28" x={70.64} y={0}>
                  {"n"}
                </tspan>
                <tspan x={83.13} y={0}>
                  {"t Code"}
                </tspan>
              </text>
              <circle
                className="prefix__cls-25"
                cx={90.02}
                cy={354.15}
                r={10.04}
              />
              <circle
                cx={90.02}
                cy={351.06}
                r={10.04}
                fill="url(#prefix__linear-gradient-11)"
              />
              <text
                className="prefix__cls-19"
                transform="translate(112.36 157.79)"
              >
                {"Su"}
                <tspan x={27.93} y={0} letterSpacing="-.03em">
                  {"b"}
                </tspan>
                <tspan className="prefix__cls-24" x={40.77} y={0}>
                  {"t"}
                </tspan>
                <tspan className="prefix__cls-28" x={48.03} y={0}>
                  {"o"}
                </tspan>
                <tspan x={60.66} y={0} letterSpacing="-.02em">
                  {"t"}
                </tspan>
                <tspan x={67.92} y={0} letterSpacing={0}>
                  {"al"}
                </tspan>
              </text>
              <circle
                className="prefix__cls-25"
                cx={90.02}
                cy={152.39}
                r={10.04}
              />
              <circle
                cx={90.02}
                cy={149.3}
                r={10.04}
                fill="url(#prefix__linear-gradient-12)"
              />
              <circle
                className="prefix__cls-25"
                cx={352.62}
                cy={410.51}
                r={10.04}
              />
              <circle
                cx={352.62}
                cy={407.42}
                r={10.04}
                fill="url(#prefix__linear-gradient-13)"
              />
            </g>
          </g>
        </g>
      </svg>
    </div>
  );
}

export default TypeSafe;
